<template>
    <div id="lottery_page">
        <el-row :gutter="30" class="lottery-body">
            <el-col :span="8" class="lottery-content-left lottery-content lottery-item award">
                <img :src="this.$store.state.lottery.prizeList[this.$store.state.lottery.index].cover" class="award-img"
                     alt="">
                <p class="award-level">
                    {{this.$store.state.lottery.prizeList[this.$store.state.lottery.index].level_name}}</p>
                <p class="award-name">{{this.$store.state.lottery.prizeList[this.$store.state.lottery.index].name}}</p>
            </el-col>
            <el-col :span="16" class="lottery-content-right">
                <el-row class="lottery-content">
                    <el-col class="lottery-item who">
                        <i></i>
                        <div class="img-container">
                            <img :src="this.$store.state.lottery.who.img" alt="" class="who-img">
                            <img src="../assets/images/lottery/crown.png" alt="" class="who-img-crown">
                            <p style="height: 10%;line-height: 2rem;font-size: 2rem;">
                                {{this.$store.state.lottery.who.img.name}}</p>
                        </div>
                    </el-col>
                    <el-col class="lottery-item">
                        <div class="start-left">
                            <i></i>
                            <img :src="pic" alt="" class="start-img">
                        </div>
                        <div class="start-right">
                            <i></i>
                            <el-button class="start-btn" @click="open">{{btnText}}</el-button>
                            <p class="start-join">共有{{userList.length}}人参与抽奖</p>
                        </div>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>

        <transition name="el-zoom-in-center">
            <div v-show="popUpShow" class="popup" @click="popUpShow=false">
                <div class="popup-container">
                    <img :src="this.$store.state.lottery.who.img" alt="" class="popup-img">
                    <p style="margin-left: 6%;line-height: 4rem;font-size: 4rem;color: #fff">
                        {{this.$store.state.lottery.who.name}}</p>
                </div>
            </div>
        </transition>
    </div>
</template>


<script>
    export default {
        data() {
            return {
                popUpShow: false,
                userList: [],
                qishuId: '',
                name: '',
                interval: '',
                pic: 'http://test3.chenxinliuyi.com/pc/images/who.png',
                inter: '',
                btnText: '开始抽奖'
            }
        },
        mounted: function () {
            // 获取奖品列表
            this.$http.get('/api/lottos').then(response => {
                const id = response.data.lottos[0].id
                this.$http.get('/api/lotto/show/' + id).then(response => {
                    this.qishuId = response.data.lotto.lotto_gos[0].id
                    this.$store.commit('storageLotteryInfo', response.data.lotto.prizes)
                }, response => {
                    console.log(response)
                })
            }, response => {
                console.log(response)
            })

            // 获取签到者列表
            this.$http.get('/api/signs').then(response => {
                this.userList = response.data.users
            }, response => {
                console.log(response)
            })

            this.interval = setInterval(() => {
                // 获取签到者列表
                this.$http.get('/api/signs').then(response => {
                    this.userList = response.data.users
                }, response => {
                    console.log(response)
                })
            }, 10000)
        },
        methods: {
            open() {
                if (this.btnText === '开始抽奖') {
                    this.btnText = '结束抽奖'
                    let $this = this
                    this.$store.commit('storageLotteryWho', ['http://test3.chenxinliuyi.com/pc/images/who.png', ''])
                    $this.inter = setInterval(function () {
                        $this.pic = $this.userList[parseInt(Math.random() * $this.userList.length)].head_img
                    }, 200);
                } else {
                    // 开抽
                    this.$http.post('/api/lotto/luck', {
                        lotto_id: this.$store.state.lottery.prizeList[this.$store.state.lottery.index].lotto_id,
                        go_id: this.qishuId,
                        prize_id: this.$store.state.lottery.prizeList[this.$store.state.lottery.index].id
                    }).then(response => {
                        clearInterval(this.inter)
                        this.pic = 'http://test3.chenxinliuyi.com/pc/images/who.png'
                        this.$store.commit('storageLotteryWho', [response.data.user.head_img, response.data.user.name])
                        this.popUpShow = true
                    }, () => {
                        this.$message.error('参与人数不足！')
                    })
                    this.btnText = '开始抽奖'
                }
            }
        },
        beforeDestroy() {
            clearInterval(this.interval)
        }
    }
</script>

<style scoped>
    #lottery_page {
        width: 100%;
        height: 100%;
        background: url("../assets/images/background/lottery.jpg");
        background-size: 100% 100%;
    }

    .lottery-body {
        position: absolute;
        width: 80%;
        height: 85%;
        top: 5%;
        left: 10%;
        overflow: hidden;
    }

    .lottery-item {
        background: rgba(255, 255, 255, .4);
    }

    .lottery-content-left, .lottery-content-right, .lottery-content {
        height: 100%;
    }

    .lottery-content-left.lottery-item:first-child {
        border-radius: .5rem 0 0 .5rem;
    }

    .lottery-content-right .lottery-content {
        padding-top: 15px;
    }

    .lottery-content-right .lottery-item:nth-child(1) {
        height: 60%;
        border-radius: 0 .5rem 0 0;
        margin-top: -15px;
        margin-bottom: 15px;
    }

    .lottery-content-right .lottery-item:nth-child(2) {
        height: 40%;
        border-radius: 0 0 .5rem 0;
    }

    .award {
        padding: 4rem 2rem;
    }

    .award .award-img {
        display: block;
        margin: 0 auto;
        width: 85%;
        height: 70%;
    }

    .award .award-level {
        margin-top: 15%;
        text-align: center;
        font-size: 2rem;
    }

    .award .award-name {
        text-align: center;
        font-size: 2rem;
    }

    .who {
        vertical-align: middle;
        text-align: center;
    }

    i {
        vertical-align: middle;
        display: inline-block;
        height: 100%;
    }

    .who .img-container {
        display: inline-block;
        position: relative;
        vertical-align: middle;
        height: 60%;
    }

    .who .who-img {
        height: 100%;
        border: .2rem solid #fff;
        border-radius: 50%;
    }

    .who .who-img-crown {
        position: absolute;
        top: -20%;
        left: 30%;
        width: 40%;
    }

    .start-left {
        float: left;
        width: 50%;
        height: 100%;
        vertical-align: middle;
        text-align: center;
    }

    .start-img {
        height: 60%;
        vertical-align: middle;
        border: .2rem solid #fff;
        border-radius: 50%;
    }

    .start-right {
        position: relative;
        float: right;
        width: 50%;
        height: 100%;
        vertical-align: middle;
        text-align: center;
    }

    .start-join {
        position: absolute;
        width: 100%;
        bottom: 1rem;
        text-align: center;
        font-size: 1.8rem;
    }

    .start-btn {
        background: #e90000;
        color: #fff;
        font-size: 2rem;
        padding: 1rem 4rem;
    }

    .popup {
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .8);
    }

    .popup-container {
        position: absolute;
        top: 15%;
        left: 25%;
        width: 50%;
        height: 60%;
        background: url("../assets/images/lottery/lottery-popup-bg.png") no-repeat;
        background-size: 100% 100%;
        text-align: center;
    }

    .popup-img {
        height: 60%;
        margin-top: 15%;
        margin-left: 6%;
        border: .2rem solid #fff;
        border-radius: 50%;
    }
</style>
